﻿<!-- Views/Admin/ImportQuestions.cshtml -->
@{
    ViewBag.Title = "导入试题";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <h2>导入试题 - @ViewBag.ExamName</h2>
    <hr />

    <!-- 显示消息 -->
    @if (ViewBag.ErrorMessage != null)
    {
        <div class="alert alert-danger">
            @Html.Raw(ViewBag.ErrorMessage)
        </div>
    }

    @if (ViewBag.SuccessMessage != null)
    {
        <div class="alert alert-success">
            @Html.Raw(ViewBag.SuccessMessage)
        </div>
    }

    @if (ViewBag.WarningMessage != null)
    {
        <div class="alert alert-warning">
            @Html.Raw(ViewBag.WarningMessage)
        </div>
    }

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">导入说明</h3>
        </div>
        <div class="panel-body">
            <h4>模板格式说明：</h4>
            <ul>
                <li><strong>试题内容</strong>：必填，试题的具体内容</li>
                <li><strong>试题类型</strong>：必填，只能填写 单选题、多选题、判断题、填空题</li>
                <li><strong>分数</strong>：必填，正整数</li>
                <li>
                    <strong>正确答案</strong>：
                    <ul>
                        <li>单选题：填写正确选项标识，如 A</li>
                        <li>多选题：填写所有正确选项标识，用逗号分隔，如 A,B,C</li>
                        <li>判断题：填写 正确 或 错误</li>
                        <li>填空题：填写所有正确答案，用逗号分隔，如 答案1,答案2,答案3</li>
                    </ul>
                </li>
                <li>
                    <strong>选项</strong>：
                    <ul>
                        <li>单选题、多选题：需要填写选项</li>
                        <li>判断题、填空题：选项列可以留空</li>
                    </ul>
                </li>
            </ul>

            <div class="alert alert-info">
                <h4>重要提示：</h4>
                <ul>
                    <li>模板中的示例行（第3-7行）将被自动过滤，不会导入</li>
                    <li>请从第8行开始填写您的试题数据</li>
                    <li>空行将被自动跳过</li>
                    <li>系统会自动验证数据格式和完整性</li>
                    <li><strong>填空题不需要填写选项列，答案直接填写在"正确答案"列</strong></li>
                    <li>填空题多个答案请用英文逗号分隔</li>
                </ul>
            </div>

            <h4>填空题示例：</h4>
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>试题内容</th>
                            <th>试题类型</th>
                            <th>分数</th>
                            <th>正确答案</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>中国的四大名著是：《______》、《______》、《______》、《______》</td>
                            <td>填空题</td>
                            <td>20</td>
                            <td>红楼梦,西游记,水浒传,三国演义</td>
                        </tr>
                        <tr>
                            <td>一年有______个月，一周有______天。</td>
                            <td>填空题</td>
                            <td>10</td>
                            <td>12,7</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h4>使用步骤：</h4>
            <ol>
                <li>点击下方"下载导入模板"按钮下载Excel模板</li>
                <li>从第8行开始填写您的试题数据（前7行是示例，会被自动过滤）</li>
                <li>保存Excel文件</li>
                <li>在本页面选择该文件并点击"导入试题"</li>
            </ol>

            <p>
                <button type="button" id="downloadTemplate" class="btn btn-info">
                    <i class="glyphicon glyphicon-download"></i> 下载导入模板
                </button>
            </p>
        </div>
    </div>

    @using (Html.BeginForm("ImportQuestions", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        <input type="hidden" name="examId" value="@ViewBag.ExamId" />

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">上传试题文件</h3>
            </div>
            <div class="panel-body">
                <div class="form-group">
                    <label for="excelFile" class="control-label">选择Excel文件</label>
                    <input type="file" class="form-control" id="excelFile" name="excelFile" accept=".xlsx,.xls" />
                    <p class="help-block">支持 .xlsx 和 .xls 格式的Excel文件，文件大小不超过50MB</p>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">
                        <i class="glyphicon glyphicon-upload"></i> 导入试题
                    </button>
                    <a href="@Url.Action("Questions", "Admin", new { examId = ViewBag.ExamId })" class="btn btn-danger">
                        <i class="glyphicon glyphicon-arrow-left"></i> 返回试题列表
                    </a>
                </div>
            </div>
        </div>
    }
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            // 异步下载模板
            $('#downloadTemplate').click(function() {
                var examId = '@ViewBag.ExamId';
                var downloadUrl = '@Url.Action("DownloadImportTemplate", "Admin")' + '?examId=' + examId;

                // 使用XMLHttpRequest下载文件
                var xhr = new XMLHttpRequest();
                xhr.open('GET', downloadUrl, true);
                xhr.responseType = 'blob';

                xhr.onload = function() {
                    if (xhr.status === 200) {
                        // 创建下载链接
                        var blob = xhr.response;
                        var downloadLink = document.createElement('a');
                        var url = window.URL.createObjectURL(blob);
                        downloadLink.href = url;
                        downloadLink.download = '试题导入模板.xlsx';

                        // 触发下载
                        document.body.appendChild(downloadLink);
                        downloadLink.click();
                        document.body.removeChild(downloadLink);
                        window.URL.revokeObjectURL(url);

                        // 显示下载提示
                        alert('模板下载已开始，请查看浏览器下载列表。');
                    } else {
                        alert('下载模板失败，请重试。');
                    }
                };

                xhr.onerror = function() {
                    alert('下载模板失败，请检查网络连接。');
                };

                xhr.send();
            });

            // 表单提交验证
            $('form').submit(function(e) {
                var fileInput = $('#excelFile');
                if (fileInput.val() === '') {
                    alert('请选择要上传的Excel文件。');
                    e.preventDefault();
                    return false;
                }

                // 检查文件扩展名
                var fileName = fileInput.val().toLowerCase();
                if (!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')) {
                    alert('请选择.xlsx或.xls格式的Excel文件。');
                    e.preventDefault();
                    return false;
                }

                // 显示处理提示
                $(this).find('button[type=submit]').prop('disabled', true).html('<i class="glyphicon glyphicon-hourglass"></i> 正在导入...');

                return true;
            });
        });
    </script>
}